<script setup>
import Tabbarstudent from "../../pages/componentstudent/Tabbarstudent.vue";
import { ref, reactive, computed } from 'vue';

const formData = reactive({
  name: '',
  gender: '', // '男' 或 '女'
  age: '',
  phone: '',
  // 问题1
  symptoms: [], // 存储选中的症状值
  otherSymptoms: '',
  // 问题2
  travelHistory: '', // '是' 或 '否'
  epidemicProvince: '',
  epidemicCity: '',
  returnDate: '', // '__月__日' 格式
  // 问题3
  contactWithCases: '', // '是' 或 '否'
  lastContactDate: '', // '__月__日' 格式
  // 问题4
  contactWithHighRisk: '', // '是' 或 '否'
  lastContactHighRiskDate: '', // '__月__日' 格式
});

// 症状选项
const symptoms = [
  { text: '发热(≥37.3℃)', value: '发热(≥37.3℃)' },
  { text: '咳嗽', value: '咳嗽' },
  { text: '嗓子痛(咽痛)', value: '嗓子痛(咽痛)' },
  { text: '胸闷', value: '胸闷' },
  { text: '呼吸困难', value: '呼吸困难' },
  { text: '其他症状', value: '其他症状' },
  { text: '无以上症状', value: '无以上症状' }
];

// 计算属性：判断症状选项是否应被禁用
const isSymptomDisabled = computed(() => (value) => {
  // 如果选中了“无以上症状”，则禁用除“无以上症状”外的所有选项
  if (formData.symptoms.includes('无以上症状') && value !== '无以上症状') {
    return true;
  }
  // 如果选中了其他症状，则“无以上症状”被禁用
  if (formData.symptoms.length > 0 && !formData.symptoms.includes('无以上症状') && value === '无以上症状') {
    return true;
  }
  return false;
});

// 切换症状选择
const toggleSymptom = (value) => {
  const index = formData.symptoms.indexOf(value);
  if (index > -1) {
    // 如果已选中，则取消选择
    formData.symptoms.splice(index, 1);
  } else {
    // 如果未选中
    if (value === '无以上症状') {
      // 选择“无以上症状”时，清空其他选项
      formData.symptoms = [value];
    } else {
      // 选择其他症状时，移除“无以上症状”
      const noneIndex = formData.symptoms.indexOf('无以上症状');
      if (noneIndex > -1) {
        formData.symptoms.splice(noneIndex, 1);
      }
      formData.symptoms.push(value);
    }
  }
};

// 处理点击“问题2 否”的逻辑
const handleTravelHistoryNoClick = () => {
  uni.showModal({
    title: '提示',
    content: '您选择了“否”，将不会填写后续疫情高发地区旅居史信息。',
    showCancel: true,
    confirmText: '确认',
    cancelText: '取消',
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确认');
        formData.travelHistory = '否';
        // 清空相关字段
        formData.epidemicProvince = '';
        formData.epidemicCity = '';
        formData.returnDate = '';
      } else if (res.cancel) {
        console.log('用户点击取消');
        // 如果之前不是'是'，则重置为未选择状态
        if (formData.travelHistory !== '是') {
          formData.travelHistory = '';
        }
      }
    }
  });
};

// 提交表单
const handleSubmit = () => {
  // 基本信息验证
  if (!formData.name || !formData.gender || !formData.age || !formData.phone) {
    uni.showToast({ title: '请填写完整的基本信息', icon: 'none' });
    return;
  }

  // 症状验证
  if (formData.symptoms.length === 0) {
    uni.showToast({ title: '请选择症状情况', icon: 'none' });
    return;
  }

  // 问题2验证
  if (!formData.travelHistory) {
    uni.showToast({ title: '请选择旅居史情况', icon: 'none' });
    return;
  }
  if (formData.travelHistory === '是') {
    if (!formData.epidemicProvince || !formData.epidemicCity || !formData.returnDate) {
      uni.showToast({ title: '请填写完整的旅居史信息', icon: 'none' });
      return;
    }
  }

  // 问题3验证
  if (!formData.contactWithCases) {
    uni.showToast({ title: '请选择接触确诊病例情况', icon: 'none' });
    return;
  }
  if (formData.contactWithCases === '是' && !formData.lastContactDate) {
    uni.showToast({ title: '请填写最后接触时间', icon: 'none' });
    return;
  }

  // 问题4验证
  if (!formData.contactWithHighRisk) {
    uni.showToast({ title: '请选择与高风险地区人员往来情况', icon: 'none' });
    return;
  }
  if (formData.contactWithHighRisk === '是' && !formData.lastContactHighRiskDate) {
    uni.showToast({ title: '请填写最后往来时间', icon: 'none' });
    return;
  }

  // 模拟提交成功
  uni.showToast({
    title: '提交成功',
    icon: 'success'
  });

  // 延迟1.5秒后跳转回上一页
  setTimeout(() => {
    uni.navigateBack();
  }, 1500);
};
</script>

<template>
  <scroll-view class="container" scroll-y="true">
  <view id="shengbaoshu">
      <view class="card">
        <view class="header">
          <text class="title">健康情况申报卡</text>
          <text class="subtitle">您好!\n为有效防控新冠肺炎疫情，确保您和他人的健康，请如实填报您近期的健康状况，非常感谢!</text>
        </view>

        <!-- 基本信息 -->
        <view class="section">
          <view class="info-row">
            <text class="label">姓名</text>
            <input class="input short-input" v-model="formData.name" />
            <text class="label">性别</text>
            <view class="radio-group">
              <label class="radio-item">
                <radio
                    :value="'男'"
                    :checked="formData.gender === '男'"
                    @click="formData.gender = '男'"
                    color="#000"
                    style="transform: scale(0.8);"
                />
                <text>男</text>
              </label>
              <label class="radio-item">
                <radio
                    :value="'女'"
                    :checked="formData.gender === '女'"
                    @click="formData.gender = '女'"
                    color="#000"
                    style="transform: scale(0.8);"
                />
                <text>女</text>
              </label>
            </view>
            <text class="label">年龄</text>
            <input class="input tiny-input" type="number" v-model="formData.age" />
            <text class="label">联系电话</text>
            <input class="input" type="tel" v-model="formData.phone" />
          </view>
        </view>

        <!-- 问题 1: 症状 -->
        <view class="section">
          <text class="question">1.过去 14天到现在，您是否有以下症状，请在相应的“□”中划“√”。</text>
          <view class="checkbox-group">
            <label class="checkbox-item" v-for="symptom in symptoms" :key="symptom.value">
              <checkbox
                  :value="symptom.value"
                  :checked="formData.symptoms.includes(symptom.value)"
                  :disabled="isSymptomDisabled(symptom.value)"
                  @click="toggleSymptom(symptom.value)"
                  color="#000"
                  style="transform: scale(0.8);"
              />
              <text>{{ symptom.text }}</text>
            </label>
          </view>
          <input
              class="input"
              placeholder="其他症状"
              v-model="formData.otherSymptoms"
              :disabled="!formData.symptoms.includes('其他症状')"
          />
        </view>

        <!-- 问题 2: 疫情高发地区旅居史 -->
        <view class="section">
          <text class="question">2.过去14天内，您是否有湖北等疫情高发地区旅居史?</text>
          <view class="radio-group">
            <label class="radio-item">
              <radio
                  :value="'是'"
                  :checked="formData.travelHistory === '是'"
                  @click="formData.travelHistory = '是'"
                  color="#000"
                  style="transform: scale(0.8);"
              />
              <text>是</text>
            </label>
            <text class="label">涉及疫情地:</text>
            <text class="label">省</text>
            <input class="input tiny-input" v-model="formData.epidemicProvince" :disabled="formData.travelHistory !== '是'" />
            <text class="label">市</text>
            <input class="input tiny-input" v-model="formData.epidemicCity" :disabled="formData.travelHistory !== '是'" />
            <text class="label">返校时间:</text>
            <input class="input date-input" type="text" v-model="formData.returnDate" :disabled="formData.travelHistory !== '是'" placeholder="__月__日" />
          </view>
          <view class="radio-group">
            <label class="radio-item">
              <radio
                  :value="'否'"
                  :checked="formData.travelHistory === '否'"
                  @click="handleTravelHistoryNoClick"
                  color="#000"
                  style="transform: scale(0.8);"
              />
              <text>否</text>
            </label>
          </view>
        </view>

        <!-- 问题 3: 接触确诊病例等 -->
        <view class="section">
          <text class="question">3.过去 14 天内，您是否曾与新冠肺炎确诊病例、疑似病例和无症状感染者有接触史?</text>
          <view class="radio-group">
            <label class="radio-item">
              <radio
                  :value="'是'"
                  :checked="formData.contactWithCases === '是'"
                  @click="formData.contactWithCases = '是'"
                  color="#000"
                  style="transform: scale(0.8);"
              />
              <text>是</text>
              <text class="label">最后接触时间:</text>
              <input class="input date-input" type="text" v-model="formData.lastContactDate" :disabled="formData.contactWithCases !== '是'" placeholder="__月__日"/>
            </label>
          </view>
          <view class="radio-group">
            <label class="radio-item">
              <radio
                  :value="'否'"
                  :checked="formData.contactWithCases === '否'"
                  @click="formData.contactWithCases = '否'"
                  color="#000"
                  style="transform: scale(0.8);"
              />
              <text>否</text>
            </label>
          </view>
        </view>

        <!-- 问题 4: 与疫情高发地区人员往来史 -->
        <view class="section">
          <text class="question">4.过去 14 天内，您是否曾与湖北等疫情高发地区人员有往来史?</text>
          <view class="radio-group">
            <label class="radio-item">
              <radio
                  :value="'是'"
                  :checked="formData.contactWithHighRisk === '是'"
                  @click="formData.contactWithHighRisk = '是'"
                  color="#000"
                  style="transform: scale(0.8);"
              />
              <text>是</text>
              <text class="label">最后往来时间:</text>
              <input class="input date-input" type="text" v-model="formData.lastContactHighRiskDate" :disabled="formData.contactWithHighRisk !== '是'" placeholder="__月__日"/>
            </label>
          </view>
          <view class="radio-group">
            <label class="radio-item">
              <radio
                  :value="'否'"
                  :checked="formData.contactWithHighRisk === '否'"
                  @click="formData.contactWithHighRisk = '否'"
                  color="#000"
                  style="transform: scale(0.8);"
              />
              <text>否</text>
            </label>
          </view>
        </view>

        <!-- 声明与签名 -->
        <view class="section declaration">
          <text class="statement">我已阅知本申报卡所列事项，并确定以上申报内容准确真实。如有不实，本人愿意承担相关法律责任。</text>
        </view>

        <button class="submit-button" @click="handleSubmit">提交填写完成</button>
      </view>
    </view>
    <Tabbarstudent :cur-index="2"></Tabbarstudent>
  </scroll-view>
</template>

<style scoped>
#shengbaoshu {
  width: 100%;
  height: calc(100% - 50px);
  background-color:#F0F3FA;
}
/* 页面容器 */
.container {
    width: 100%;
    padding: 20px;
    height: calc(100% - 50px);
    box-sizing: border-box;
  background-color:#F0F3FA;
  }
/* 标题 */
.header {
  text-align: center;
  margin-bottom: 20px;
}
.title {
  font-size: 24px;
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
}
.subtitle {
  font-size: 14px;
  white-space: pre-line; /* 保留换行符 */
}

/* 区块 */
.section {
  margin-bottom: 20px;
}

/* 问题文本 */
.question {
  font-size: 14px;
  margin-bottom: 10px;
  display: block;
}

/* 信息行 - 基本信息 */
.info-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px; /* 元素间的间距 */
  margin-bottom: 10px;
}
.label {
  font-size: 14px;
  white-space: nowrap; /* 防止标签换行 */
}
.input {
  border: 0.5px solid #000;
  padding: 2px 5px;
  font-size: 14px;
  box-sizing: border-box;
}
.short-input {
  width: 80px;
}
.tiny-input {
  width: 60px;
}
.date-input {
  width: 100px;
}

/* 单选按钮组 */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}
.radio-item {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* 复选框组 */
.checkbox-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.checkbox-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

/* 声明部分 */
.declaration {
  margin-top: auto; /* 将声明推到底部 */
  margin-bottom: 20px;
}
.statement {
  font-size: 14px;
  white-space: pre-line; /* 保留换行符 */
}

/* 提交按钮 */
.submit-button {
  width: 100%;
  height: 40px;
  background-color: #000;
  color: white;
  border: none;
  border-radius: 0;
  font-size: 16px;
  font-weight: bold;
  margin-top: auto; /* 将按钮推到底部 */
}
</style>